CSS Nite LP62「Webアクセシビリティの学校」特別授業
https://cssnite.jp/images/OGP-CSSNiteLP62.png
プロダクト開発本部 プロダクトマネージャー, UXデザイナー アクセシビリティ何かしら取り組んでいる？
会場6割ちかく
この場に要る全員が実は取り組んでいる
Webに載るだけで圧倒的にアクセシブル
お店、新聞、学校、業務 → Webに載る
Webに載るのは携帯・発見・頑健を担保
改変：hackagbility
共有：shareability
使用：usability
携帯：portability
発見：findability
頑健：robustness
アクセシビリティとは「使えるかどうか？」
使えるか Accessibile
使いやすいか Usable
特定の目的を達成するために
特定の利用者が特定の利用状況で
有効性、効率性、そして満足と共に
とある商品を利用することができる
様々な能力をもつ幅広い層の人々に対する製品サービス環境
または施設のユーザビリティ
ユーザビリティ≒アクセシビリティ
アクセシビリティガイドラインでは利用者全般のユーザビリティを向上させる
アクセシビリティ＝ユーザビリティの幅広さ
Webアクセシビリティの解剖
マシンリーダブル
プログラムが解釈できるか
Webならではのアプローチ
レベルAで必ず満たされるべきもの
ヒューマンリーダブル
人の目で見やすいか、わかりやすいかどうか
一例
知覚可能
操作可能
理解可能
モバイルの利用状況から来るデザインヒント
UIが特定の状況、幅広い状況にそれぞれ対応する
2.1.4 ウェブアクセシビリティ対応に関する誤解
注意点！
ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提
供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。
https://www.youtube.com/watch?v=p80PJXMPIDY
Googleを使うときに色反転・拡大しているがGoogle自体にそういう機能はない ブラウザや支援技術をもって状況に適した表現に変えられるか？というのが重要
大事なこと
ユーザビリティ
特定のユーザーを狙い撃つ
ヒューマンリーダビリティ
閲覧状況があることを理解して網を貼る
マシンリーダビリティ
変換して届けられる可能性を保つ
Webアクセシビリティの誤解
売りにつながらないのでは？
分母へのアプローチ
デザイン側での唯一のアプローチ手段
コンバージョンを得る
65歳以上の利用が16.4%（1653万人）
障害者の利用率は高い（82.7〜93.4%）
流入を増やす？アクセシブルにする？
守りのイメージがある
Googleの検索結果の評価がでる
インサイトの数字をみて、一番「差」が開くなぁ・・・と感じるのは、 「無音でも見られる・読める動画」かどうか・・・という事でした。
アクセシビリティは攻めの一手
コストは増える？
JIS対応による効果
コスト低減
メンテナンスコストは低下
ワンソースでマルチデバイス対応時のコストは抑えられる
コンポーネント・テンプレート
個別対応が減るとコスト削減・品質の安定
デザインシステム
Lightning Design System
CARBON DESIGN SYSTEM
Vibes（freee株式会社）
今は必要ない？
障害者差別解消法
不当な差別的取扱いはしてはいけない
合理的配慮
役所は対応
会社・お店はするように努力
総務省
みんなの公共サイト運用ガイドライン
各国法整備
カナダ：AODA
アメリカ：Section 508, ADA, ACAA
EU：EN 301 549
韓国：障害者差別禁止法
始めるには今しかない
どこからはじめるか
マシンとヒューマンの架け橋はテキスト
伝わる可能性が一番高いUI「テキスト」
Webはほとんどテキスト
情報設計
階層をつける、ラベルをつける、ナビゲーションへ導く、検索する
テキストを意識してヒューマンリーダブルの形でわかりやすく構造をつくる
マシンリーダブルはテキストがあってこそ
テキストがなければマークアップはできない（！）
構造を持つテキストなら難しくない
だれもが隣にいる人と一緒に楽しむために
東京ディズニーリゾートのバリアフリー
ワンポイント手話出演
羽田空港国際ターミナル・成田空港のユニバーサルデザイン
国際ユニヴァーサルデザイン協議会（IAUD）理事
中途失聴者
聞こえる世界・聞こえにくい世界・聞こえない世界を体験
低くて強い声は心地よい音
筑波技術短期大学
現在は技術大学
唯一、聴覚・視覚障害者が学ぶことができる大学
学生は全員聴覚障害者
ディズニーランドのバリアフリーを研究
バリアは無くせていける
システマ・ハグキプラスのCM
ボディーソープ・hadakaraのCM
字幕・音声なしだったのを２番目に付けた会社
情報格差
不等な扱い
必要な情報を得る機会を制限
「字幕がついて存在意義を与えてくれた」
思いは唯一つ一緒に楽しみたい
聴覚障害の概要と現状
3人に1人が聞こえに問題を感じている
聴覚障害：34万人
難聴：3400万人
コミュニケーション手段も様々
補聴器
読話
筆談
手話
2006年国際障害者権利条約「手話は言語」
スマホ・タブレット
トータルコミュニケーション
手話をしつつ口の形を観たりする
伝えるものすべてを使って伝える
大事なのは手段を選べること
ポイント
1. 視界に入って目を合わせる
2. 顔を見せて口の形をはっきりと見せる
3. 表情と身振りを意識
4. 筆談は大きく簡潔に
5. さまざまな手段で
スマホ・音声認識・手話
行動をするための情報やコミュニケーションにバリアがある
テクノロジーがコミュニケーションを容易に
子供は手話が当たり前のコミュニケーションをしてくれる
保育園の歌を書き起こしてくれた
息子からの疑問
映画・テレビにはなぜ字幕がないの？
国会中継にはなぜ字幕がないの？
大人の皆さんはなぜ？を答えられますか？
字幕について
エンターテイメント
映画
610作品中、字幕がついてたのは何％？
13%（81本）しかついてなかった
スクリーン、メガネ型端末などもでてきた
来日公演、ミュージカル、ライブもすき
TDR
ディズニーハンディーガイド
歌舞伎
台本の貸出を幕間などに
字幕ガイドがある
文化的な楽しみを享受できるかが文化水準になる
テレビ
字幕放送はほぼ100%
字幕で観ている聴覚障害者は96.4%
字幕がつかない放送
朝のニュース・深夜放送
CM
ライオン、花王、清水建設など約20社がつけてる
NHKの国会中継
政見放送
Web動画も字幕があれば楽しめる
当事者「字幕があれば見る・なければ見ない」
JIS規格
発話以外の音声情報もキャプションにする
8341-3:2016 1.2.2キャプションの達成基準
どこまで字幕にするか？
まずは発話内容からでも表現してみないか？
メリット
閲覧数
資料率する率があがる
検索性が高まる
そのほか
日本語を取得中の子供や外国人
方言が多いものや時代劇や大河ドラマ
周囲が騒がしい・静かなトコと
電車やバスでスマホを見てる人
字幕を手軽に提供する方法
YouTubeで動画に字幕提供
音声認識提供を用いた自動字幕起こし機能
しかし精度が甘いこともある
その部分は人力で対応
辻ちゃん・ウエちゃんのアクセシブル GO GO!!「スクリーンリーダーで『Backlog』を使ってみる」の巻 スクリーンリーダーとは？
Webにある情報を音声や点字で表示できる
キーボードで操作できるようにするのが第一前提
実際にググってみる
鳥の「鷹」、野原の「野」、雅やかの「雅」、弓へんの「弘」
漢字の詳細読みをしてくれる
見出しのマークアップを利用
見出しジャンプ機能
h3要素を拾い読みした
見出しをきちんとマークアップする
ページタイトルがわかりやすいかも重要
このタグはこんな風に聞こえる
p要素
h1要素
見出し１〜
h2要素
見出し２〜
alt属性
画像〜
a要素
リンク〜
button要素
ボタン〜
ui, li要素
漢字や記号はいつもどおりに使っててOK
一貫性はもたせたるように
日付は6/1, 6.1でもOK
時刻は15:45
リニューアルされたときに、辻さんが使いづらいとツイートしたことが一時期話題になった
ボタンのマークアップ
メニューバー
ボタンなのにdiv要素
クリック可能〜と読み上げてしまう
ボタン（<button type="button">）に変更
aria-expanded="false"と"ture"で開いてるかどうかを判定できる
折りたたみ、展開と読み上げる
フォームコントロールのラベル
あたらしい課題を追加する
textarea要素を「エディット 複数行」と読み上げる
見た目は「詳細」というラベルがあった
divで囲んでいた
label要素でラベルを関連付ける
for属性とid属性で一致させる
フォームコントロールの見た目をカスタマイズ
優先度を設定する
スクリーンリーダーはselect要素をコンボボックスと読み上げる
cキーで見つけられるはずなのだが…
「コンボボックスがありません」
CSSスタイルを消してselect要素を発見
select要素をdisplay: none;していた
「諸事情より」トリッキーな実装で対処
アイコンの代替テキスト
「ボイドゼロ」と読み上げる
ボタンにSVGアイコンを使用している
<a href="javascript:void(0);">を上に配置
a要素内のsvgに代替テキストがない
imgにalt属性がないのと同じ状態
リンクではなくボタンとして実装し直した
代替テキストはaria-labelで書いた
動的に変化する数字
コメントにスターを付ける
「リンク ０」と読まれる
ボタンを押してもなにも反応しない
aria-live="polite"
スクリーンリーダーを使えるようになるための基本の「キ」
キーボード操作
文章構造のマークアップ
フォームコントロールのラベル
代替テキスト
リンク／ボタンのマークアップとラベル
辻 勝利「アクセシビリティは対応ではなく高めるもの」
質問「使いやすいSaaSサービスはなにかあるか」
そもそも使えないやつは興味がわかない
徹底解説「『代替テキスト決定ツリー』の使い方」
代替テキストとは？
<img src="https://cssnite.jp/images/CSSNiteLP62-logo_pc.png" alt="「CSS Nite LP62「Webアクセシビリティの学校」特別授業」" class="switch" style="visibility: visible;">
altの部分
基本について
1. 必須（例外を除く）
2. 空では駄目（例外を除く）
3. 適切に代替する
4. 値の適切さは文脈によってことなる
5. 情報と等価であること
6. 2回繰り返さない
参考
代替テキストを書くための手順
文字があるか
画像内の文字は基本書く
隣接するテキストがある場合は空にする
図とかグラフなどの複雑な場合
「ここにグラフがある」ということを説明しないといけない
基本内容は全部書く
書ききれないときは主旨を説明
リンクやボタンになってるか
イメージマップ
area要素：個々のリンク先
画像自体に意味がある
シンプルなグラフィック
図やグラフ
<figure role="group">や<figcaption>
隣接するテキストの補足
sleeping dog
本文で説明してる場合altは不要？
存在しないようにしてしまうと「この写真が」という会話が成立しなくなる
印象や感情を伝える
画像グループ
装飾画像
コンテンツの印象
ページデザイン
ページの雰囲気
適切な代替テキストとは？
文脈による適切さ
小説の挿絵なら？
野鳥図鑑なら？
用途によって異なる
コンテンツの適切さ
名詞や単語だけを入れるだけにせず
助詞などを入れてより適切にいれる
電話の相手に伝えるようになれるのがコツ
適切さを判断できる人は？
上流工程、ディレクター、原稿製作者が該当
画像を見ることができる
代替テキストを読める・聞ける
コンテンツの文脈が理解できる
サイボウズの組織的な取り組みとビジュアルデザイン
チームでやる場合、合理的かどうかの判断
優先タスク
関係ないのでは？
マインド
なぜ取り組むのか？
言語化する
なんとなく大事だから・なんとなく理念だから〜では不毛
サイボウズの理想
チームワークあふれる社会を創る
チームがアクセスできる能力
チームに参加したいということを尊重する
伝え方
グループウェアでの啓発
スクリーンリーダーの使い方
ガイドラインや法整備
取り組む理由
会社の「理念」と絡める
勉強会
マインドを説明する
組織の理想に紐付ける
参加メンバーも多様化
当事者によるユーザビリティテスト
価値を体感できる
どういう問題かを体感できる
チームの理想と現実はどうなのか、を知る
プロセス
開発に取り組むにはどこ？
テストで最後に１人でFBするのはアンチパターン
チームが自力で取り組めるように支援する
要件定義
ガイドライン作成
品質要件を合意できる
守る方法や効果を知見を深められる
誰がどんな項目を守るべきか、議論
ポイント
チームメンバーと一緒につくって運用する
運用負荷は減らす（これを見ればいい）
シンプルにする
複雑なものは守れない
デザイン・実装
モブデザイン・モブプログラミング
複数のチームメンバーで行う
デザイン・実装に必要な観点を議論する
効果
その場で指摘して修正するのでコストが低くなる
現実的な解決策を議論
習慣付けができる
テスト
アクセシビリティ検証会
週一回ペースで実施
ポイント
チームメンバーと一緒に検証
実装した直後に開催
7年ぶりに刷新
リニューアル前の問題点
情報構造が複雑
操作にコツがいる
デスクトップ版との差が大きい
指針
「誰か」に特化しない
みんなが使えるものにする
作法を統一
モバイルしか使えない人もいることを忘れない
覚えることを減らす
改善
タブをハンバーガーメニューに変更
チラ見をできるようにする
通知などを見た時に途中の作業が消えないようにする
構造をルール化する
グローバル操作
表示の切り替え
操作をする部分
デスクトップとモバイルで適度に揃える
より良い情報設計はすべての人に重要
視覚障害・認知、記憶障害のユーザにも使いやすく
リニューアル
コントラスト比を基に画面を設計する
明度を強く認識する
アクセシビリティのコントラスト基準を有効活用
色を有効に使う
ルール化
増やしすぎないようにする
同じ色として認識されているとは限らない
色以外の情報も併用して伝えよう
テキストをちゃんと使う
開発者の用語を使わない
タイトルや見出しを正しいコンテストを伝える
壊れにくいUIを意識
リキッドレイアウト
拡大縮小しても壊れない
画面全体、文字の大きさを2倍まで拡大できる
ユーザビリティテスト
様々な層・ユーザーに検証
FBをもらって改善していくことが沢山出てきた
色を反転すると見えない色があった
音声読み上げではコンテキストが伝わらないことがあった
アクセシビリティは普段のビジュアルデザインの延長
情報設計をちゃんとやる
色やコントラストの使い方をちゃんと考える
いろんな環境でデザインが崩れないようにする
アクセシビリティは繋がっている
理想
開発プロセス
デザインワーク
インクルーシブネスを超えて
障害当事者のことを知る大切さ
障害は多様
支援技術も多様
さまざまなユーザーがさまざまな方法でアクセスしている
サイボーグ義足
支援技術も発展してきている
https://www.youtube.com/watch?v=YL-8Xfx6S5o
オフラインでのライブキャプション機能
障害の医学モデルと社会モデル
２種類ある
医学：障害が個人に起因
社会：障害が社会に起因
障害の除去
医学：テクノロジーの進歩
社会：法制化、インクルーシブデザイン、アクセシビリティ品質の向上
アクセシビリティは品質
品質管理の取り組み
変化するユーザーの要求品質
必須の品質＝アクセシビリティ
ユーザー、デバイス、コンテキストの多様化
Webデザインは社会デザイン
情報はライフライン
情報の流通が社会をよりよくしてきた
まだ世界人口の51.2%しかインターネットを使用していない
アクセシビリティ向上に取り組んでいこう
社会の要請
着手は大事だが継続はもっと大事
小さく産んで大きく育てる
プロセスとカルチャーは「車の両輪」
Webの力は無限大！